<template>
<div id="core">
<div class="core" :style="{transform:'rotate('+degree+'deg)'}">
    <a href="#" v-for="(data,index) in datas" :key="data.id" @click="rotate(index)">
        <img :src="'/static/images/'+data.img" :style="{top:posY(index)+'px',left:posX(index)+'px',transform:'rotate('+imgdegree+'deg)'}" />
    </a>
</div>
</div>
</template>
<script>
export default {
  name: 'Core',
  data: function () {
    return {
        degree:90,
        imgdegree:-90,
        current:0,//当前选中索引
        options:{
            radius: 200,//半径
            num: 7,//元素个数
            size:90//正方形图片大小
        },
        datas:[
            {id:'1',img:'zzsc7.png'},//培训系统
            {id:'2',img:'zzsc6.png'},//故障诊断
            {id:'3',img:'zzsc5.png'},//个人中心
            {id:'4',img:'zzsc4.png'},//系统设置
            {id:'5',img:'zzsc3.png'},//用户文档
            {id:'6',img:'zzsc2.png'},//常用工具
            {id:'7',img:'zzsc1.png'}//考试系统
        ] 
    }
  },
  methods: {
      posX:function(index){//X坐标
        return this.options.radius*(1+Math.round(Math.sin(2*Math.PI*index/this.options.num)*1000)/1000)-this.options.size/2;
      },
      posY:function(index){//Y坐标
        return this.options.radius*(1-Math.round(Math.cos(2*Math.PI*index/this.options.num)*1000)/1000)-this.options.size/2;
      },
      rotate:function(index){
           this.$emit('selected', index);
          //this.isActive=index;
          //绝对值小于中间值按照正常符号，数据为负逆时针，数据为正顺时针
          if(Math.abs(this.current-index)<(this.options.num+1)/2){//选中值减去当前值
            this.degree = this.degree+360*(this.current-index)/this.options.num;
          }else{ //绝对值小于中间值按照反正常符号，数据为负顺时针，数据为正逆时针
             var tem=this.current-index;
             this.degree = this.degree+(tem>0?-1:1)*360*(this.options.num-Math.abs(tem))/this.options.num;
          }
        this.current=index;
        this.imgdegree=-this.degree;
      }
  },props:{
      //isActive:{//从父接收参数
       //   type: Number,
      //    required: true
     // }
  }
}
</script>
 <style scoped>
    .core{
        width:400px;
        height:400px;
        position: absolute;
        left: 50px;
        top: 150px;
       /* transform:rotate(90deg);
        border: 2px dashed #000;*/
        text-align: center;
        border-radius:50%;
        transition: transform 1s;
    }
    img{
    position: absolute;
    transform-origin:50% 50%;
   /* transform:rotate(-90deg);*/
    transition: transform 1s;
    }
</style>